<template>
  <div class="login">
    <div class="bg"></div>
    <div class="title">信息采集平台</div>
    <div class="login-type-wrapper" v-if="!loginType">
      <div class="login-type">
        <h3>实名登录</h3>
        <p>Real name login</p>
      </div>
      <div class="login-type" @click="loginType=1">
        <h3>口令卡登录</h3>
        <p>Password card login</p>
      </div>
    </div>
    <div class="login-form" v-if="loginType===1">
      <div class="login-form-title">口令卡登录</div>
      <div class="passport">
        <van-field v-model="password" left-icon="manager-o" placeholder="请输入口令卡" />
      </div>
      <div class="login-btn" @click="login">登录</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginType: null,
      password: ''
    };
  },
  methods: {
    login() {
      localStorage.dspToken = '1';
      this.$router.push({
        path: '/'
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login{
  position: relative;
  .title{
    position: absolute;
    top: 200px;
    font-size: 56px;
    color: #fff;
    font-weight: bolder;
    text-align: center;
    width: 100%;
  }
  >.bg{
    width: 100vw;
    height: 100vh;
    background: url('../../static/images/bg.jpg') no-repeat center center;
    background-size: cover;
    filter: blur(100px);
  }
  .login-type-wrapper{
    position: absolute;
    width: 644px;
    height: 464px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 60px 0;
    box-sizing: border-box;
    .login-type{
      position: relative;
      padding: 50px 40px 40px 40px;
      color: #fff;
      &:not(:first-child){
        margin-top: 40px;
      }
      border-radius: 8px;
      background: linear-gradient(to right, #7176EF, #587AF0 40%, #2584F0);
      h3{
        font-size: 54px;
        padding: 0;
        margin: 0;
        line-height: 1;
        padding-bottom: 26px;
      }
      p{
        font-size: 28px;
      }
      &::after{
        position: absolute;
        right: 40px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 60px;
        display: inline-block;
        content: '\F00A';
        font-family: 'vant-icon';
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
      }
    }
  }
  .login-form{
    position: absolute;
    width: 644px;
    height: 464px;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(137,157,176, .4);
    border-radius: 10px;
    padding: 60px 52px;
    box-sizing: border-box;
    box-shadow: 4px 5px 3px 0px rgb(0 0 0 / 19%);
    .login-form-title{
      font-size: 44px;
      color: #2194FC;
      font-weight: 400;
      text-align: center;
      padding-bottom: 35px;
    }
    /deep/.passport{
      .van-cell.van-field{
        display: flex;
        align-items: center;
        font-size: 28px;
        height: 80px;
        color: #fff;
        border-radius: 6px;
        background: rgba(189,199,207,.7);
        .van-field__left-icon{
          margin-right: 20px;
          .van-icon{
            font-size: 28px;
            line-height: 1;
          }
        }
        .van-field__control{
          color: #fff;
          &::-webkit-input-placeholder{
            color: #fff;
          }
        }
      }
    }
    .login-btn{
      height: 80px;
      line-height: 80px;
      text-align: center;
      margin: 60px auto 0 auto;
      font-size: 40px;
      color: #fff;
      background: #1891FF;
      border-radius: 40px;
    }
  }
}
</style>
